<template>
	<view class="wrap">
		<view class="wrap__header">
			<image src="@/static/imgs/logo.png" mode="widthFix" class="header__logo"></image>
		</view>
		<view class="wrap__main">
			<view class="main__form">
				<view class="form__item">
					<view class="item__left">
						<picker mode="selector" :range="phoneTypes" @change="typeChange" range-key="nameCode">
							<text class="left__text">+{{phoneTypes[phoneTypeIndex].dialCode}}</text>
						</picker>
						<image src="@/static/icons/input_down.png" mode="widthFix" class="left__icon"></image>
					</view>
					<input type="number" v-model="phone" maxlength="18" :placeholder="$t('login.inputPhone')" class="item__input"/>
				</view>
				<!-- 賬號密碼登錄 -->
				<template v-if="loginType==='pwd'">
					<view class="form__item">
						<inputPwd ref="pwd" :placeholder="$t('login.inputPwd1')"></inputPwd>
					</view>
					<view class="form__tips">
					
					</view>
				</template>
				<!-- 驗證碼登錄 -->
				<template v-else>
					<view class="form__item" >
						<input type="text" v-model="code" maxlength="6" :placeholder="$t('login.codeInput')" 
						class="item__input"/>
						 <view class="item__code">
							 <text class="code__tips" @click="getCode">{{isCountStart?`${count}s`:$t('login.getCode')}}</text>
						 </view>
					</view>
					<view class="form__tips">
						<text class="tips__text" @click="loginType='pwd'">{{$t('login.pwdLogin')}}</text>
					</view>
				</template>
			</view>
			<view class="main__btn" @click="loginClick">{{$t('login.btn')}}</view>
			
			
		
			
			
		</view>
		<view class="wrap__footer">
			{{$t('register.tips')}}<text class="footer__text" @click="navTo('/pages/login/register')">{{$t('register.link')}}</text>
		</view>
		
		
	
		<view class="wrap__footer1">
		<picker @change="langChange" :value="langIndex" :range="langList" range-key="name" >
				<view class="item__left">
					<view class="left__value">
						<text class="value__text">{{curLang}}</text>
						<uni-icons type="right" color="#161827" size="20"></uni-icons>
					</view>
				</view>
		</picker>
		</view>
	</view>
	
	
	
</template>

<script>
	import {countries} from '@/common/js/county.js'
	import inputPwd from '@/components/common/inputPwd.vue'
	export default {
		components:{
			inputPwd
		},
		data() {
			return {
				phoneTypes:countries,
				phoneTypeIndex:0,
				phone:"",    // 手機13282930291
				password:"", //密碼
				code:"", //驗證碼
				loginType:"pwd" , //記錄當前登錄方式 pwd code
				isCountStart:false,
				curLang:"", //当前语言
				langList:[//语言列表
					{name:this.$t('language.kro'), value:"kro"},
					{name:this.$t('language.en'), value:"en"},
				],
			};
		},
		computed:{
			codeReg() { //验证码校验
				return this.code.length >= 4
			},
		},
		onLoad() {
		
			// 获取语言信息
			let language = uni.getStorageSync("language")
			let index = this.langList.findIndex(item=>{
				return item.value === language
			})
			this.langIndex = index
			this.curLang =this.langList[index].name
		},
		methods:{
			// 语言切换
			langChange(e){
				let {value} = e.detail
				this.langIndex = value
				let language = this.langList[value]
				this.curLang = language.name
				uni.setStorageSync("language", language.value)
				uni.setLocale(language.value)
				this.$i18n.locale = language.value
				uni.reLaunch({
					url: '/pages/mine/mine'
				});
			},
			// 登录点击
			async loginClick(){
				let {loginType, phone, phoneTypes, phoneTypeIndex} = this
				if(!this.phone){
					this.showToast(this.$t('login.inputPhone'))
					return 
				}
				let params = {}
				if(loginType === "pwd"){ //密码登录
					let {pwd} = this.$refs.pwd
					if(pwd.length < 6){
						this.showToast(this.$t("login.inputPwd"))
						return 
					}
					params = {
						prefix:phoneTypes[phoneTypeIndex].dialCode,
						account:phone,
						password:pwd
					}
				}else{
					if(!this.codeReg){
						this.showToast(this.$t("login.codeInput"))
						return
					}
					params = {
						prefix:phoneTypes[phoneTypeIndex],
						mobile:phone,
						captcha:this.code
					}
				}
				this.loginHandle(params)
			},
			// 登錄處理
			async loginHandle(params){
				uni.showLoading({
					title:this.$t('loading.loading'),
					mask:true
				})
				let res = {}
				if(this.loginType==="pwd"){ //賬號密碼登錄
					res = await this.$api.userLogin(params) 
				}else{
					res = await this.$api.phoneLogin(params) 
				}
				uni.hideLoading()
				if(res.code === 1 && res.data){
					let {userinfo} = res.data
					if(userinfo.token){
						uni.setStorageSync("token", userinfo.token)
						// 获取用户信息
						this.$store.dispatch("user/getUserInfo")
					}
					uni.showToast({
						title:this.$t('success.success'),
						// icon:"success",
						mask:true
					})
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/find/find"
						})
					}, 1200)
				}else{
					uni.showModal({
						title:this.$t('modal.title'),
						content:res.msg,
						showCancel:false
					})
				}
			},
			// 獲取驗證碼
			async getCode() {
				let {code,codeReg,phone,isCountStart} = this
				if (isCountStart) {
					return
				}
				if (!phone) {
					this.showToast(this.$t("login.inputPhone"))
					return
				}
				// 获取手机验证码
				let res = await this.$api.getPhoneCode(this.phone, "mobilelogin")
				if(res.code===1){
					this.showToast("success")
					this.countHandle()
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			//倒计时处理
			countHandle() {
				this.count = 60
				this.isCountStart = true
				this.count--
				this.timerId = setInterval(() => {
					if (this.count > 1) {
						this.count--
					} else {
						this.isCountStart = false
						clearInterval(this.timerId)
					}
				}, 1000)
			},
			// 提示信息
			showToast(title){
				uni.showToast({
					title,
					icon:"none"
				});
			},
			// 類型切換
			typeChange(e){
				let {value} = e.detail
				if(this.phoneTypeIndex !== value){
					this.phoneTypeIndex = value
				}
			},
			navTo(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		.item__left{
			margin: 0 auto;
			color: #fff;
		}
		.wrap__header{
			height: 400rpx;
			@include flexCenter();
			color: #161827;
			font-size: 60rpx;
			.header__logo{
				width: 200rpx;
				height: 200rpx;
				border-radius: 12rpx;
			}
		}
		.wrap__main{
			padding: 0 55rpx;
			box-sizing: border-box;
			.main__form{
				.form__item{
					@include flexRowAlign();
					padding: 0 30rpx;
					box-sizing: border-box;
					height: 120rpx;
					background: #282c41;
					border-radius: 12rpx;
					margin-top: 60rpx;
					&:first-child{
						margin-top: 0;
					}
					.item__left{
						@include flexRowAlign();
						font-size: 32rpx;
						color: #fff;
						.left__text{
							color: #fff;
						}
						.left__icon{
							width: 18rpx;
							height: 12rpx;
							margin-left: 20rpx;
							margin-right: 40rpx;
						}
					}
					.item__input{
						flex: 1;
						font-size: 32rpx;
						color: #fff;
						background-color: #282c41;
					}
					.item__code{
						margin-left: 20rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: #458EF4;
					}
				}
			}
			.form__tips{
				@include flexRowAlign(space-between);
				font-size: 28rpx;
				font-weight: 500;
				color: #161827;
				margin-top: 20rpx;
			}
			.main__btn{
				@include flexCenter();
				width: 640rpx;
				height: 120rpx;
				background: #458EF4;
				border-radius: 12rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				margin-top: 52rpx;
			}
		}
		.wrap__footer{
			@include flexRowAlign(center);
			font-size: 30rpx;
			color: #fff;
			position: relative;
			width: 750rpx;
			bottom: -300rpx;
			left: 0;
			.footer__text{
				color: #458EF4;
				margin-left: 10rpx;
			}
		}
		
		.wrap__footer1{
			@include flexRowAlign(center);
			font-size: 30rpx;
			color: #161827;
			position: relative;
			width: 750rpx;
			bottom: -400rpx;
			left: 0;
			.footer__text{
				color: #458EF4;
				margin-left: 10rpx;
			}
		}
	}
</style>
